<title>Vue/Tailwind App</title> 
<script src="https://registry.npmmirror.com/vue/3.3.11/files/dist/vue.global.js"></script> 
<script src="https://cdn.tailwindcss.com"></script> 
<style> body { font-family: 'Inter', sans-serif; } </style>
<body>
  <div id="app"></div>
</body>
<script type="module"> 
const { createApp } = Vue;
createApp({
  template: `
    <div class="bg-white shadow rounded-lg p-6 w-full max-w-sm mx-auto mt-12">
      <div class="flex justify-between items-center border-b pb-4">
        <div class="text-lg font-semibold">全部</div>
        <div class="text-sm">44</div>
        <button class="text-gray-400 hover:text-gray-600">
          <i class="fas fa-ellipsis-h"></i>
        </button>
      </div>
      <div class="flex items-center justify-between py-4 border-b">
        <button class="text-blue-600 text-lg font-semibold flex items-center">
          <i class="fas fa-plus mr-2"></i>新建分组
        </button>
        <button class="text-gray-500 px-4 py-2 rounded-lg border bg-gray-200 
                   hover:bg-gray-300 text-sm font-semibold">
          Shift + N
        </button>
      </div>
      <div class="flex items-center justify-between py-4">
        <button class="text-gray-500 text-lg font-semibold flex items-center">
          <i class="far fa-folder mr-2"></i>未分组
        </button>
        <div class="text-sm">44</div>
      </div>
    </div>
  `
}).mount('#app');
</script>